<template>
   <div id="share-page" class="share-box" v-if="shareShow">
    <div class="share-mark"></div>
    <div class="share-aciton-box">
      <div class="title-box">
        <div class="title">{{$t('message.buttons.share')}}</div>
        <svg class="close-button" aria-hidden="true" @click="closeShare">
          <use xlink:href="#keowledge-mobile-guanbi"></use>
        </svg>
      </div>
      <div class="share-open-box">
        <div class="oepn-title">{{$t('message.mobile.openShareMethod')}}</div>
        <div class="open-switch" @click="changeOpenShare" :style="{background:openShareButton?'#1E6FFF':''}">
          <div class="switch-button" :style="{left:!openShareButton?'.125rem':'1.25rem'}"></div>
        </div>
      </div>
      <div class="validity-box" v-if="openShareButton">
        <div class="validity-title">{{$t('message.text.setExpiration')}}</div>
        <div class="validity-item" v-for="(item,index) in validityList" :key="index" @click="changeValidity(item)">
          <svg class="check-box-svg" aria-hidden="true">
            <use v-bind:xlink:href="`#${knowledgeInfo.validity==item.value?'keowledge-mobile-xuanzhong':'keowledge-mobile-weixuanzhong'}`"></use>
          </svg>
          <span class="validity-label">{{$t(item.label)}}</span>
        </div>
      </div>
      <div class="validity-box sec" v-if="openShareButton">
        <div class="validity-title">{{$t('message.mobile.shareTo')}}</div>
        <div class="share-mehotd-box">
          <template v-for="(item,index) in shareList" :key="index">
            <div class="share-item" @click="doAction(item)" v-if="!item.hidden">
              <div class="icon-box">
                <svg class="icon" aria-hidden="true">
                  <use v-bind:xlink:href="`#${item.icon}`"></use>
                </svg>
              </div>
              <div class="label">{{$t(item.label)}}</div>
            </div>
          </template>
        </div>
      </div>
      <div class="not-open-box" v-if="!openShareButton">
        <jvs-empty imgSrc="@/assets/images/common/noAuth.png" :text="$t('message.empty.noOpenShare')" style="padding:2rem 0px;" size="11.875rem"></jvs-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { getByIdShareInfo,shareSetting } from '@/api/common'
import { setSessionStore,getSessionStore } from '@/utils/store'
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits(["changeShareType"])
const props = defineProps({
  position:{
    type:String,
    default:'absolute'
  }
})

const validityList = [
  {label:'message.typeMenu.dayValidity7',value:'7'},
  {label:'message.typeMenu.dayValidity30',value:'30'},
  {label:'message.typeMenu.perValidity',value:'forever'},
]
const shareList=[
  {label:'message.mobile.wechatFriends',hidden:true,icon:'keowledge-mobile-a-zu5084',type:'weChat'},
  {label:'message.buttons.copyLink',hidden:false,icon:'keowledge-mobile-a-zu5083',type:'copyUrl'},
  {label:'message.mobile.generateQRCode',hidden:false,icon:'keowledge-mobile-a-zu5082',type:'qCode'}
]
const shareShow = ref(false)
const knowledgeInfo = ref({
  validity:'7'
})
const currentItem = ref({})
const openShareButton = ref(false)

function changeOpenShare(){
  let url = null,shareLinkOriginal=null
  if(!openShareButton.value){
    url = `knId=${currentItem.value.knowledgeId}&type=${currentItem.value.type}&ft=${currentItem.value.nameSuffix || ''}&id=${currentItem.value.docId || currentItem.value.id}`
    shareLinkOriginal = url
  }
  shareSetting({
    dcId:currentItem.value.id,
    id:currentItem.value.id,
    settingType:'SHARE',
    share:!openShareButton.value,
    updatePassWord:false,
    shareLinkOriginal:shareLinkOriginal,
    validityType:'PERPETUAL'
  }).then(res=>{
    if(res.data.code==0){
      openShareButton.value = !openShareButton.value
      currentItem.value.share =  openShareButton.value
      proxy.$mobileMessage({
        text:openShareButton.value?$t('message.mobile.openShare'):$t('message.mobile.closeShare'),
        type:'success'
      })
      emit("changeShareType",openShareButton.value)
    }
  })
}
function openShare(item){
  if(item) currentItem.value = JSON.parse(JSON.stringify(item))
  getByIdShareInfo(currentItem.value.id).then(res=>{
    if(res.data.code==0){
      openShareButton.value = res.data.data.share
      if(res.data.data.share){
        currentItem.value.shareKey = res.data.data.shareKey
        currentItem.value.shareLink = res.data.data.shareLink
        currentItem.value.shareLinkOriginal = res.data.data.shareLinkOriginal
      }
    }
  })
  shareShow.value = true
}
function closeShare(){
  shareShow.value = false
}
function changeValidity(item){
  knowledgeInfo.value.validity = item.value
}
function doAction(item){
  switch(item.type){
    case 'weChat':
      jWeixin && jWeixin.config({
        debug:false,
        appId:'wx6f24be89a5f4511c',
        timestamp:'',
        nonceStr:'',
        signature:'',
        jsApiList:[
          'updateAppMessageShareData'
        ]
      })
      break;
    case 'qCode':
      closeShare()
      setSessionStore({name:'qCodeItem',content:currentItem.value})
      let routerList = getSessionStore({name:'mobileRouterList'}) || []
      let currentPath = route.fullPath
      if(routerList.indexOf(currentPath)!=-1){
        routerList.splice(routerList.indexOf(currentPath),1)
      }
      routerList.push(currentPath)
      setSessionStore({name:'mobileRouterList',content:routerList})
      router.push('/mobile/qcode')
      break;
    case 'copyUrl':
      // todo
      break;
    default:
      break;
  }
}
</script>
<style lang="scss" scoped>
.share-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  .share-mark{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(54,59,76,0.5);
    z-index: 0;
  }
  .share-aciton-box{
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 1;
    background-color: #f5f6f7;
    border-radius: .75rem .75rem 0px 0px;
    padding: 1rem .375rem .375rem;
    box-sizing: border-box;
    .title-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon-png{
        width: 1.5rem;
        height: 1.5rem;
        margin-left: .75rem;
      }
      .title{
        width: calc(100% - 3.75rem);
        color: #363B4C;
        font-size: .9375rem;
        @include SourceHanSansCN-Bold;
        margin-left: .75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .close-button{
        width: 1rem;
        height: 1rem;
        margin-right: .75rem;
      }
    }
    .share-open-box{
      border-radius: .4375rem .4375rem 0 0;
      padding: 1rem .75rem;
      box-sizing: border-box;
      background: #FFFFFF;
      margin-top: .75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .oepn-title{
        @include SourceHanSansCN-Bold;
        color: #363B4C;
        font-size: .9375rem;
      }
      .open-switch{
        width: 2.625rem;
        height: 1.5rem;
        background: #E3E6E8;
        border-radius: .375rem;
        display: flex;
        align-items: center;
        padding: .125rem;
        position: relative;
        transition: all 0.5s;
        .switch-button{
          position: absolute;
          width: 1.25rem;
          height: 1.25rem;
          background: #FFFFFF;
          transition: all 0.5s;
          border-radius: .375rem;
        }
      }
    }
    .validity-box{
      margin-top: .375rem;
      padding: 1rem .75rem;
      box-sizing: border-box;
      background: #FFFFFF;

      .validity-title{
        font-size: .9375rem;
        color: #363b4c;
        @include SourceHanSansCN-Bold;
      }
      .validity-item{
        display: flex;
        align-items: center;
        margin-top: 1rem;
        .check-box-svg{
          width: .875rem;
          height: .875rem;
        }
        .validity-label{
          color: #363B4C;
          font-size: .875rem;
          @include SourceHanSansCN-Regular;
          margin-left: 1rem;
        }
      }
      .share-mehotd-box{
        margin-top: .75rem;
        display: flex;
        align-items: center;
        .share-item{
          margin-right: 1.25rem;
          display: flex;
          align-items: center;
          flex-direction: column;
          .icon-box{
            width: 4.25rem;
            height: 4.25rem;
            border-radius: .5rem;
            background: #F5F6F7;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon{
              width: 1.75rem;
              height: 1.75rem;
            }
          }
          .label{
            @include SourceHanSansCN-Regular;
            font-size: .875rem;
            color:#363B4c;
            margin-top: .5rem;
          }
        }
      }
    }
    .sec{
      margin-top: .375rem;
      border-radius: 0 0 .4375rem .4375rem;
    }
    .not-open-box{
      height:20.5rem;
      margin-top: .375rem;
      background: #FFFFFF;
      border-radius:0 0 .375rem .375rem;
    }
  }
}
</style>